<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
		<style>
			
			.title{
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
	
			.oa-contact-avatar {
				width: 75px;
			}
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			.oa-contact-content {
				width: 100%;
			}
			.oa-contact-name {
				margin-right: 20px;
			}
			.oa-contact-name, oa-contact-position {
				float: left;
			}
		</style>
	</head>

	<body>
		<div id="app">
		<header class="mui-bar mui-bar-nav">
			<img v-if="!isGetIsbn" src="../images/back.png" style="padding-top: 10px; width: 6%;" @click="clear_isbn()">
			<img v-if="!isInList" src="../images/back.png" style="padding-top: 10px; width: 6%;" @click="back_list()">
			<h1 class="mui-title">BOOKPLUS</h1>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-icon mui-icon-bars"></span>
				<span class="mui-tab-label">书架</span>
			</a>
			<!-- <a class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a> -->
		</nav>
		<div class="mui-content">
			<div id="tabbar" class="mui-control-content mui-active">
				<!-- <view class="sao-button">
				      <image onclick="getMedia()" src="../images/tiaoxingma.png"></image>
				</view> -->
				<div id="wait-info" v-if="isGetIsbn">
					<div class="sao-button" >
						<img src="../images/tiaoxingma.png" onclick="$('#barCode').click()" >
					</div>
					<input type="file" style="display:none" id="barCode" accept="image/*" mutiple="mutiple" capture="camera" />
					<div class="m-12" style="width: 100%;display: flex;justify-content: center;align-content: center;flex-direction: column;">
						<div style="width: 140px;margin: auto;margin-bottom: 20px;">
							<!-- <button type="button" onclick="$('#barCode').click()"  style="width: 140px;">点击拍照上传图片</button> -->
							<img id="img" class="mt-12" width="140" height="100" style="border-radius: 10%;display:block;text-align: center;" />
							<p class="codeInfo mt-12" style="color: blue;font-size: 16px;text-align: center;"></p>
							<p class="time mt-24 fs-18 text-center"></p>
							<div class="correct-isbn">
								<input v-if="!(isbn==0)" @click="getIsbn()" type="button" name="correct-isbn" id="" value="查询" />
							</div>
						</div>
						
					</div>
				</div>
				<div v-if="!isGetIsbn" class="mui-control-content mui-active">
					<div class="book-container">
						<img src="https://img1.doubanio.com/view/subject/l/public/s4371408.jpg"/>
						<div class="grade-layout">
							<div class="grade">
								<font size="3" color="#515151">豆瓣评分</font>
							</div><br>
							<div class="rate">
								<font size="10" color="#AAAAAA">{{grade}}</font>
							</div>
						</div>
					</div>
					
					<!--书籍详情-->
					<div class="book-detail">
						<br>
						<font size="5" color="#515151">{{name}}</font><br>
						<font size="3" color="#aaa">作者：{{author}}</font>
						<font size="3" color="#aaa">出版社：{{publicer}}</font>
						<font size="3" color="#aaa">ISBN:{{isbn}}</font>
						<font size="3" color="#aaa">定价：{{price}}</font>
					</div>
					
					<!--书籍介绍评价-->
					<div class="book-detail">
						<br>
						<font size="4" color="#515151">介绍</font><br>
						<font size="3" color="#aaa">{{introduction}}</font>
					</div>
					
				</div>
			</div>
			
			<div id="tabbar-with-info" class="mui-control-content">
				<div class="title">书籍详情</div><br>
			</div>
			
			<div id="tabbar-with-contact" class="mui-control-content">
				<div v-if="isInList" class="title">书籍推荐Top100</div>
				<div v-if="!isInList" class="title">书籍No.{{isbn}}</div>
				<ul v-if="isInList" class="mui-table-view mui-table-view-striped mui-table-view-condensed">
				<li v-for="(item,index) in books" class="mui-table-view-cell" @click="getListIsbn(item.isbn)">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img style="width: 80%;" :src="item.picture" >
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">{{item.name}}</h4>
									<span class="oa-contact-position mui-h6">{{item.isbn}}</span>
								</div>
								<div class="list-grade">
									<p>评分：</p>
								</div>
								<p class="oa-contact-email mui-h6">
									作者：
								</p>
								<p class="oa-contact-email mui-h6">
									出版社：
								</p>
							</div>
						</div>
					</div>
				</li>
			</ul>
			
			<div v-if="!isInList" class="mui-control-content mui-active">
				<div class="book-container">
					<img src="https://img1.doubanio.com/view/subject/l/public/s4371408.jpg"/>
					<div class="grade-layout">
						<div class="grade">
							<font size="3" color="#515151">豆瓣评分</font>
						</div><br>
						<div class="rate">
							<font size="10" color="#AAAAAA">{{grade}}</font>
						</div>
					</div>
				</div>
				
				<!--书籍详情-->
				<div class="book-detail">
					<br>
					<font size="5" color="#515151">{{name}}</font><br>
					<font size="3" color="#aaa">作者：{{author}}</font>
					<font size="3" color="#aaa">出版社：{{publicer}}</font>
					<font size="3" color="#aaa">ISBN:{{isbn}}</font>
					<font size="3" color="#aaa">定价：{{price}}</font>
				</div>
				
				<!--书籍介绍评价-->
				<div class="book-detail">
					<br>
					<font size="4" color="#515151">介绍</font><br>
					<font size="3" color="#aaa">{{introduction}}</font>
				</div>
			</div>
			
			</div>
			
			
			<div id="tabbar-with-map" class="mui-control-content">
				<div id="had-login" >			
				<div class="title">用户</div><br>
				<ul v-if="!isLogin" class="mui-table-view">
					<li class="mui-table-view-cell">
						<div class="mui-slider-cell">
							<div class="oa-contact-cell mui-table">
								<div class="oa-contact-avatar mui-table-cell">
									<img src="../images/60x60.gif" />
								</div>
								<div class="oa-contact-content mui-table-cell">
									<div class="mui-clearfix">
										<h4 class="oa-contact-name">麻志远</h4>
									</div>
									<p class="oa-contact-email mui-h6">
										zjmazy
									</p>
								</div>
							</div>
						</div>
					</li>
				</ul>
				<ul class="mui-table-view" style="margin-top: 25px;">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							关于BOOKPLUS
						</a>
					</li>
				</ul>
				<ul class="mui-table-view" style="margin-top: 25px;">
					<li class="mui-table-view-cell">
						<a @click="logout()" style="text-align: center;color: #FF3B30;">
							退出登录
						</a>
					</li>
				</ul>
				</div>
				<div v-if="!isLogin" id="wait-login" >
				<div class="title">用户登录</div><br>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<div class="mui-slider-cell">
							<div class="oa-contact-cell mui-table">
								<div class="oa-contact-avatar mui-table-cell">
									<img src="../images/60x60.gif" />
								</div>
								<div class="oa-contact-content mui-table-cell">
									<div class="mui-clearfix">
										<h4 class="oa-contact-name">麻志远</h4>
									</div>
									<p class="oa-contact-email mui-h6">
										zjmazy
									</p>
								</div>
							</div>
						</div>
					</li>
				</ul>
				
				</div>
			</div>
		</div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40076/DecoderWorker.js"></script>
	<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40076/exif.js"></script>
	<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40076/BarcodeReader.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script>
	        var app = new Vue({
	            el: '#app',
	            data: {
	                message: 'Hello Vue!',
					isbn:0,
	                isGetIsbn:true,
					name:"1984",
					author:"[英] 乔治·奥威尔",
					publicer:"北京十月文艺出版社",
					price:"28.00",
					grade:8.8,
					introduction:"《1984》是一部杰出的政治寓言小说，也是一部幻想小说。作品刻画了人类在极权主义社会的生存状态，有若一个永不褪色的警示标签，警醒世人提防这种预想中的黑暗成为现实。历经几十年，其生命力益显强大，被誉为20世纪影响最为深远的文学经典之一。",
	                isInList:true,
					books:[
	                    {isbn:"1",name:"时间简史",author:"",publicer:"",price:"",grade:"",introduction:"",picture:"https://img1.doubanio.com/view/subject/l/public/s4371408.jpg"},
	                    {isbn:"2",name:"",author:"",publicer:"",price:"",grade:"",introduction:"",picture:"https://img1.doubanio.com/view/subject/l/public/s4371408.jpg"},
						{isbn:"3",name:"",author:"",publicer:"",price:"",grade:"",introduction:"",picture:"https://img1.doubanio.com/view/subject/l/public/s4371408.jpg"},
						{isbn:"4",name:"",author:"",publicer:"",price:"",grade:"",introduction:"",picture:"https://img1.doubanio.com/view/subject/l/public/s4371408.jpg"},
						{isbn:"4",name:"",author:"",publicer:"",price:"",grade:"",introduction:"",picture:"https://img1.doubanio.com/view/subject/l/public/s4371408.jpg"},
						{isbn:"4",name:"",author:"",publicer:"",price:"",grade:"",introduction:"",picture:"https://img1.doubanio.com/view/subject/l/public/s4371408.jpg"},
	                ],
					video: null,
					isLogin:false,
	            },
	            methods: {
					logout:function(){
						this.isLogin = !this.isLogin;
					},
					getIsbn:function(){
						console.log(this.isbn);
						this.isGetIsbn = !this.isGetIsbn;
					},
					setIsbn:function(i){
						this.isbn = i;
					},
					clear_isbn:function(){
						location.reload();
					},
					getListIsbn:function(i){
						this.isInList = !this.isInList;
						console.log(i);
						this.isbn = i;
					},
					back_list:function(){
						this.isInList = !this.isInList;
					},
	            },
	        })
			
			$(function() {
					compatibleInput();
					var timeStart = '';
					var timeEnd = '';
					BarcodeReader.Init();
					BarcodeReader.SetImageCallback(function(result) {
						console.dir(result);
						if(!result.length) {
							$(".codeInfo").html('条形码读取失败');
							return
						}
						var barcode = result[0];
						if(barcode.Value) {
							$(".codeInfo").html('条形码信息是：' + barcode.Value);
							console.log(barcode.Value);
							app.setIsbn(barcode.Value);
						}
						timeStart1 = new Date()
						console.log(timeStart1)
						var date3 = timeStart1.getTime() - timeStart.getTime() //时间差的毫秒数
						$(".time").html('共用时：' + date3 + '毫秒')
					});
					document.querySelector("#barCode").addEventListener('change', function(evt) {
						timeStart = new Date()
						console.log(timeStart)
						var file = evt.target.files[0];
						reader = new FileReader();
						console.log(reader)
						reader.onloadend = function() {
							var img = new Image();
							img.src = reader.result;
							console.log(img)
							BarcodeReader.DecodeImage(img);
						}
						console.log(file)
						//			$('#img').attr('src', window.createObjectURLcre(file))   ;   
						reader.readAsDataURL(file);
						img.src = URL.createObjectURL(file)
			 
					}, false);
				});
				// 判断当前是否属于ios移动端，兼容input同时调用手机相册和相机
			 
			function compatibleInput(){
			　　//获取浏览器的userAgent,并转化为小写
			　　var ua = navigator.userAgent.toLowerCase();
			　　//判断是否是苹果手机，是则是true
			　　var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
			　　if (isIos) {
			　　　　$("input:file").removeAttr("capture");
			　　};
			}
			
	</script>
</html>